﻿@page "/"

<PageTitle>Index</PageTitle>

<h1>Welcome to the Blazor component for ChartJS</h1>

<p>After a lot of work, I finally complete the first implementation of my <a href="https://www.puresourcecode.com/tag/blazor-component/">Blazor component</a> for <a href="https://www.chartjs.org/" target="_blank" rel="noreferrer noopener">ChartJS</a> for <a href="https://www.puresourcecode.com/tag/blazor-webassembly/">Blazor WebAssembly</a> and <a href="https://www.puresourcecode.com/tag/blazor-server/">Blazor Server</a>. This component helps you to create beautiful graphs with the famous JavaScript library for chart called ChartJS.</p>

<p>So, I restarted from scratch using <a href="https://www.puresourcecode.com/tag/net7/">NET7</a> and the latest version of ChartJS at the present the version 3.7.1.</p>

<p>With the current implementation, you can create the following charts:</p>

<ul><li>Area</li><li>Bar</li><li>Bubble</li><li>Doughnut</li><li>Pie</li><li>Line</li><li>Polar Area</li><li>Radar</li><li>Scatter</li></ul>

<p>
To use the Blazor component for ChartJS in your Blazor WebAssembly or Blazor Server project, the first thing is to add the ChartJS library and the JavaScript for the component in your Index.html. Before closing the tag body, add the following lines
</p>

<CodeSnippet Language="Language.javascript" Style="Style.VisualStudio">
&lt;script src="_content/PSC.Blazor.Components.Chartjs/lib/Chart.js/chart.js">&lt;/script>
&lt;script src="_content/PSC.Blazor.Components.Chartjs/Chart.js">&lt;/script>
</CodeSnippet>

<p>I added the ChartJS library in the component, so, if you use the version from the component, you know the generation of the charts is correct and working. Maybe with the next versions of the library, I have to change the model.</p>

<p>Then, you have to add in your <code>_Imports.razor</code> the following namespaces</p>

<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio">
&#64;using PSC.Blazor.Components.Chartjs
&#64;using PSC.Blazor.Components.Chartjs.Enums
&#64;using PSC.Blazor.Components.Chartjs.Models
&#64;using PSC.Blazor.Components.Chartjs.Models.Common
&#64;using PSC.Blazor.Components.Chartjs.Models.Bar
&#64;using PSC.Blazor.Components.Chartjs.Models.Bubble
&#64;using PSC.Blazor.Components.Chartjs.Models.Doughnut
&#64;using PSC.Blazor.Components.Chartjs.Models.Line
&#64;using PSC.Blazor.Components.Chartjs.Models.Pie
&#64;using PSC.Blazor.Components.Chartjs.Models.Polar
&#64;using PSC.Blazor.Components.Chartjs.Models.Radar
&#64;using PSC.Blazor.Components.Chartjs.Models.Scatter
</CodeSnippet>

<h3>
    Add data labels to the graph
</h3>

<p>
    I added the <code>chartjs-plugin-datalabels</code> plugin in the component. This plugin shows the labels for each point in each graph.
    First, in the <em>index.html</em>, we have to add after the <code>chart.js</code> script, another script for this component. 
    It is important to add the script for <code>chartjs-plugin-datalabels</code> after <code>chart.js</code>. If the order is different, the plugin could not work.
</p>

<CodeSnippet Language="Language.javascript" Style="Style.VisualStudio">
&lt;script src="_content/PSC.Blazor.Components.Chartjs/lib/chartjs-plugin-datalabels/chartjs-plugin-datalabels.js">&lt;/script>
</CodeSnippet>

<p>
    In the code, you have to change the property <code>RegisterDataLabels</code> under <code>Options</code> to <code>true</code>.
    That asks to the component to register the library if the library is added to the page and there is data to show.
</p>

<h3>Wrap up</h3>

<p>
    So, how you can see, there is a namespace for each type of charts plus the generics (Enums, Models and the base). This allows you to use the component across your application.
</p>

More documentation about this component is on <a href="" target="_blank">PureSourceCode</a>. If you need support, use my <a href="https://www.puresourcecode.com/forum/chart-js-for-blazor/" target="_blank">forum</a>. The source code of the component and the demo is on <a href="https://github.com/erossini/BlazorChartjs" target="_blank">GitHub</a>.

<div style="width: 100%; height: 50px;"></div>